<template>
	<view class="home">
		<custom-navbar title='园区引导' :show-back="true" @back="handleBack" />

		<view class="content p30" :style="{ paddingTop: navBarHeight + 'px' }">
			<image class="tilteImg  mt30" :src="cdn('园区引导.jpg')"></image>
			<view class="gardenlist">
				<view class="item" v-for="(item,index) in gardenlist" :key="index" @click="handleItemClick(item)">
					<view class="fcsb">
						<view class="fc">
							<image class="wh40" :src="item.guidance_icon"></image>
							<view class="ml10 f285c3">{{item.guidance_title}}</view>
						</view>
						<image class="wh24" src="/static/images/garden/箭头.svg"></image>
					</view>
					<up-line margin='36rpx 0 36rpx 0' v-if="index !== gardenlist.length - 1"></up-line>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import CustomNavbar from '@/components/custom-navbar.vue'
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		getCurrentInstance
	} from 'vue'
	import {
		lists
	} from '@/api/garden'

	// 获取全局cdn方法
	const {
		proxy
	} = getCurrentInstance()
	const cdn = (path) => proxy.$cdn + path
	// 2. 获取系统信息（同步操作放在setup最前面）
	const systemInfo = uni.getSystemInfoSync()

	// 3. 定义响应式数据
	const searchKey = ref('')
	const gardenlist = ref([])

	// 4. 计算属性
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)

	const handleBack = () => {
		uni.switchTab({
			url: '/pages/index/index'
		});
	};

	const handleItemClick = (item) => {
		// 处理点击事件，可以跳转到详情页或其他操作
		console.log('点击了:', item);
		uni.navigateTo({
			url: '/pages/garden/detail?id=' + item.guidance_id
		});
	};

	// 获取园区引导列表
	const getGardenList = async () => {
		try {
			const params = {
				lang_code: 'zh',
				limit: 10,
				page: 1
			};
			const res = await lists(params);
			if (res.code === 200) {
				gardenlist.value = res.data.data;
			} else {
				console.error('获取数据失败:', res.message);
			}
		} catch (error) {
			console.error('请求出错:', error);
		}
	};

	onMounted(() => {
		getGardenList();
	});
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		overflow: hidden; // 防止页面整体滚动

		.content {
			padding-top: var(--status-bar-height);
			padding-top: calc(var(--status-bar-height) + 70rpx);
			/* 导航栏高度 */
			height: 100%;
			display: flex;
			flex-direction: column;

			.tilteImg {
				width: 100%;
				height: 320rpx;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
			}

			.gardenlist {
				position: relative;
				top: -30rpx;
				width: 690rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				padding: 32rpx 28rpx 0 32rpx;
				box-sizing: border-box;

				.item {
					padding: 20rpx 0;
				}

				.wh40 {
					width: 40rpx;
					height: 40rpx;
				}

				.wh24 {
					width: 24rpx;
					height: 24rpx;
				}

				.ml10 {
					margin-left: 10rpx;
				}



				.fc {
					display: flex;
					align-items: center;
				}

				.fcsb {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}
	}
</style>